<template>
  <div class="rightBottom">
    <div class="headerMaintitle" style="margin-bottom: 15px">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <!-- <img src="../assets/rightBottom2.png" alt="" /> -->
    <div class="grids">
      <div class="grid">
        <div class="gridTop">
          <img
            class="tempoBottomImg"
            src="../assets/rightBottomIcon1.png"
            alt=""
          />
          <div>
            <div class="num">30</div>
            <div class="title">管网总长 (Km)</div>
          </div>
        </div>
        <img
          style="margin-top: -19px"
          src="../assets/rightBottomboard.png"
          alt=""
        />
      </div>
      <div class="grid">
        <div class="gridTop">
          <img
            class="tempoBottomImg"
            src="../assets/rightBottomIcon2.png"
            alt=""
          />
          <div>
            <div class="num">10000</div>
            <div class="title">覆盖面积 (Km²)</div>
          </div>
        </div>
        <img
          style="margin-top: -19px"
          src="../assets/rightBottomboard.png"
          alt=""
        />
      </div>
      <div class="grid">
        <div class="gridTop">
          <img
            class="tempoBottomImg"
            src="../assets/rightBottomIcon3.png"
            alt=""
          />
          <div>
            <div class="num">{{ level.partyResultCount || 0 }}</div>
            <div class="title">数据展示3</div>
          </div>
        </div>
        <img
          style="margin-top: -19px"
          src="../assets/rightBottomboard.png"
          alt=""
        />
      </div>
    </div>
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="gridBottom">
      <div class="left">
        <img class="tempoBottomImg" src="../assets/fjcz.png" alt="" />
      </div>
      <div class="right">
        <div class="line">
          <img src="../assets/rightBottom2.png" />
          <div class="text">站房在线概况</div>
          <div class="num">15</div>
          <div class="des">在线率：100%</div>
        </div>
        <div class="line">
          <img src="../assets/rightBottom2.png" />
          <div class="text">日排水量(m³)</div>
          <div class="num" style="left: 176px">28537</div>
          <div class="des">合格率：100%</div>
        </div>
        <div class="line">
          <img src="../assets/rightBottom2.png" />
          <div class="text">本月巡检任务</div>
          <div class="num" style="left: 166px">4</div>
          <div class="des">完成率：90%</div>
        </div>
        <div class="line">
          <img src="../assets/rightBottom2.png" />
          <div class="text">本月工单</div>
          <div class="num" style="left: 146px">12</div>
          <div class="des">完成率：100%</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { levelData, gradeData } from "@/api/serve";
export default {
  name: "RightBottom",
  props: {},
  components: {},
  data() {
    return {
      level: {},
      grade: {},
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      levelData().then((res) => {
        this.level = res.data.result || {};
      });
      gradeData().then((res) => {
        this.grade = res.data.result || {};
      });
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.tempoBottomImg {
  animation: blink 3s infinite;
}
.rightBottom {
  .grids {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 30px;
    .grid {
      width: 230px;
      .gridTop {
        display: flex;
        align-items: center;
        justify-content: center;
        & > div {
          margin-left: 10px;
        }
        .num {
          font-weight: bold;
          font-size: 28px;
          color: #ffffff;
          line-height: 37px;
        }
        .title {
          font-size: 20px;
          color: #ffffff;
          line-height: 26px;
          margin-top: 4px;
        }
      }
    }
  }
  .gridBottom {
    margin-top: 33px;
    display: flex;
    .left {
      width: 212px;
      flex: 1;
      margin-right: 10px;
    }
    .right {
      & > div:first-child {
        margin-top: 5px;
      }
      .line {
        height: 46px;
        width: 498px;
        margin-top: 29px;
        position: relative;
        .text {
          position: absolute;
          left: 15px;
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #ffffff;
          line-height: 46px;
          top: 0;
        }
        .num {
          position: absolute;
          left: 205px;
          font-family: YouSheBiaoTiHei;
          font-size: 36px;
          color: #01fffe;
          line-height: 46px;
          top: 0;
        }
        .des {
          font-size: 20px;
          color: #ffffff;
          line-height: 46px;
          top: 0;
          left: 352px;
          position: absolute;
        }
      }
    }
  }
}
</style>
